{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Introduction"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "1429bb91d73e4c488b4f2aa13198704a",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "StitchWidget(srcdoc='\\n<html>\\n<script>\\nwindow.addEventListener(\"message\", function(event) {\\n    if (event.s…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "import stitch\n",
    "\n",
    "w = stitch.StitchWidget()\n",
    "w.srcdoc = \"\"\"\n",
    "<html>\n",
    "<script>\n",
    "window.addEventListener(\"message\", function(event) {\n",
    "    if (event.source === window.parent && event.data.type === \"kernelmsg\") {\n",
    "        document.getElementById(\"msgview\").innerHTML = event.data.content;\n",
    "        window.parent.postMessage({type: \"clientmsg\", content: event.data.content}, \"*\");\n",
    "    }\n",
    "});\n",
    "window.addEventListener(\"load\", function(){\n",
    "    var prevHeight = 0;\n",
    "    var prevWidth = 0;\n",
    "    setInterval(function() {\n",
    "        var body = document.body, html = document.documentElement;\n",
    "        var height = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);\n",
    "        var width = Math.max(body.scrollWidth, body.offsetWidth, html.clientWidth, html.scrollWidth, html.offsetWidth);\n",
    "        if (height !== prevHeight || prevWidth !== width) {\n",
    "            msg = {type: 'resize', content: {height: height + 'px', width: width + 'px'}};\n",
    "            window.parent.postMessage(msg, \"*\");\n",
    "            prevHeight = height;\n",
    "            prevWidth = width;\n",
    "        }\n",
    "    }, 100);\n",
    "});\n",
    "</script>\n",
    "<body>\n",
    "<div style=\"white-space: nowrap\">\n",
    "MESSAGE: <span id=\"msgview\"></span>\n",
    "</div>\n",
    "</body>\n",
    "</html>\n",
    "\"\"\"\n",
    "w"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "710c6cea2c264750a3a7a4ff414fbcbc",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "StitchWidget(kernelmsg='Houston, we have a problem.', srcdoc='\\n<html>\\n<script>\\nwindow.addEventListener(\"mes…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "w.kernelmsg = \"Houston, we have a problem.\"\n",
    "w"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Wow, a change!\n"
     ]
    }
   ],
   "source": [
    "w.observe(lambda x: print(x[\"new\"]), \"kernelmsg\")\n",
    "w.kernelmsg = \"Wow, a change!\""
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3 (ipykernel)",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.10.4"
  },
  "widgets": {
   "application/vnd.jupyter.widget-state+json": {
    "state": {
     "1429bb91d73e4c488b4f2aa13198704a": {
      "model_module": "stitch",
      "model_module_version": "^0.1.0",
      "model_name": "StitchModel",
      "state": {
       "_model_module_version": "^0.1.0",
       "_view_module_version": "^0.1.0",
       "layout": "IPY_MODEL_38aea3bb36e44c858cdaffdb975f8337",
       "srcdoc": "\n<html>\n<script>\nwindow.addEventListener(\"message\", function(event) {\n    if (event.source === window.parent && event.data.type === \"kernelmsg\") {\n        document.getElementById(\"msgview\").innerHTML = event.data.content;\n        window.parent.postMessage({type: \"clientmsg\", content: event.data.content}, \"*\");\n    }\n});\nwindow.addEventListener(\"load\", function(){\n    var prevHeight = 0;\n    var prevWidth = 0;\n    setInterval(function() {\n        var body = document.body, html = document.documentElement;\n        var height = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);\n        var width = Math.max(body.scrollWidth, body.offsetWidth, html.clientWidth, html.scrollWidth, html.offsetWidth);\n        if (height !== prevHeight || prevWidth !== width) {\n            msg = {type: 'resize', content: {height: height + 'px', width: width + 'px'}};\n            window.parent.postMessage(msg, \"*\");\n            prevHeight = height;\n            prevWidth = width;\n        }\n    }, 100);\n});\n</script>\n<body>\n<div style=\"white-space: nowrap\">\nMESSAGE: <span id=\"msgview\"></span>\n</div>\n</body>\n</html>\n"
      }
     },
     "38aea3bb36e44c858cdaffdb975f8337": {
      "model_module": "@jupyter-widgets/base",
      "model_module_version": "1.2.0",
      "model_name": "LayoutModel",
      "state": {}
     },
     "710c6cea2c264750a3a7a4ff414fbcbc": {
      "model_module": "stitch",
      "model_module_version": "^0.1.0",
      "model_name": "StitchModel",
      "state": {
       "_model_module_version": "^0.1.0",
       "_view_module_version": "^0.1.0",
       "clientmsg": "Houston, we have a problem.",
       "kernelmsg": "Houston, we have a problem.",
       "layout": "IPY_MODEL_c4db6348056b4781be7a080c8b24074d",
       "srcdoc": "\n<html>\n<script>\nwindow.addEventListener(\"message\", function(event) {\n    if (event.source === window.parent && event.data.type === \"kernelmsg\") {\n        document.getElementById(\"msgview\").innerHTML = event.data.content;\n        window.parent.postMessage({type: \"clientmsg\", content: event.data.content}, \"*\");\n    }\n});\nwindow.addEventListener(\"load\", function(){\n    var prevHeight = 0;\n    var prevWidth = 0;\n    setInterval(function() {\n        var body = document.body, html = document.documentElement;\n        var height = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);\n        var width = Math.max(body.scrollWidth, body.offsetWidth, html.clientWidth, html.scrollWidth, html.offsetWidth);\n        if (height !== prevHeight || prevWidth !== width) {\n            msg = {type: 'resize', content: {height: height + 'px', width: width + 'px'}};\n            window.parent.postMessage(msg, \"*\");\n            prevHeight = height;\n            prevWidth = width;\n        }\n    }, 100);\n});\n</script>\n<body>\n<div style=\"white-space: nowrap\">\nMESSAGE: <span id=\"msgview\"></span>\n</div>\n</body>\n</html>\n"
      }
     },
     "aedfaff012b247cdb2377bfb24cfc553": {
      "model_module": "stitch",
      "model_module_version": "^0.1.0",
      "model_name": "StitchModel",
      "state": {
       "_model_module_version": "^0.1.0",
       "_view_module_version": "^0.1.0",
       "clientmsg": "Wow, a change!",
       "kernelmsg": "Wow, a change!",
       "layout": "IPY_MODEL_b9d5d1caf34c4d94875827b94c472c19",
       "srcdoc": "\n<html>\n<script>\nwindow.addEventListener(\"message\", function(event) {\n    if (event.source === window.parent && event.data.type === \"kernelmsg\") {\n        document.getElementById(\"msgview\").innerHTML = event.data.content;\n        window.parent.postMessage({type: \"clientmsg\", content: event.data.content}, \"*\");\n    }\n});\nwindow.addEventListener(\"load\", function(){\n    var prevHeight = 0;\n    var prevWidth = 0;\n    setInterval(function() {\n        var body = document.body, html = document.documentElement;\n        var height = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);\n        var width = Math.max(body.scrollWidth, body.offsetWidth, html.clientWidth, html.scrollWidth, html.offsetWidth);\n        if (height !== prevHeight || prevWidth !== width) {\n            msg = {type: 'resize', content: {height: height + 'px', width: width + 'px'}};\n            window.parent.postMessage(msg, \"*\");\n            prevHeight = height;\n            prevWidth = width;\n        }\n    }, 100);\n});\n</script>\n<body>\n<div style=\"white-space: nowrap\">\nMESSAGE: <span id=\"msgview\"></span>\n</div>\n</body>\n</html>\n"
      }
     },
     "b9d5d1caf34c4d94875827b94c472c19": {
      "model_module": "@jupyter-widgets/base",
      "model_module_version": "1.2.0",
      "model_name": "LayoutModel",
      "state": {}
     },
     "c4db6348056b4781be7a080c8b24074d": {
      "model_module": "@jupyter-widgets/base",
      "model_module_version": "1.2.0",
      "model_name": "LayoutModel",
      "state": {}
     }
    },
    "version_major": 2,
    "version_minor": 0
   }
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}
